<template>
  <div class="page-container">
    <!-- 查询表单 -->
    <el-form :model="searchParams" inline class="search-form" size="medium">
      <el-form-item label="一体杆名称:">
        <el-input v-model="searchParams.poleName" placeholder="请输入一体杆名称" />
      </el-form-item>
      <el-form-item label="一体杆编号:">
        <el-input v-model="searchParams.poleNumber" placeholder="请输入一体杆编号" />
      </el-form-item>
      <el-form-item label="处置状态:">
        <el-select v-model="searchParams.handleStatus" clearable placeholder="请选择处置状态">
          <el-option v-for="item in Object.keys(handleStatusEnum)" :key="item" :label="handleStatusEnum[item]" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchWarnningList()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 一体杆信息表格 -->
    <el-table :data="warningList" :header-cell-style="{ background: '#f7f8f9' }" @selection-change="onSelectionChange">
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column prop="poleName" label="一体杆名称" />
      <el-table-column prop="poleNumber" label="一体杆编号" />
      <el-table-column prop="errorType" label="故障类型" />
      <el-table-column label="处置状态">
        <template #default="{ row }">
          {{ handleStatusEnum[row.handleStatus] }}
        </template>
      </el-table-column>
      <el-table-column prop="warningTime" label="告警时间" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button v-auth-btn="'pole:warning:send'" type="text" :disabled="row.handleStatus !== 0">派单</el-button>
          <el-button v-auth-btn="'pole:warning:query'" type="text" @click="$router.push(`/rod/warning/details?mode=details&id=${row.id}`)">详情</el-button>
          <el-button v-auth-btn="'pole:warning:remove'" type="text" :disabled="row.handleStatus !== 3" @click="onDeleteWarning(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      :current-page.sync="searchParams.page"
      layout="->, total, prev, pager, next"
      :total="warningTotal"
      @current-change="getWarningList"
    />
  </div>
</template>

<script>
import { getWarningListAPI, deleteWarningAPI } from '@/api/rod/warning'

export default {
  name: 'RodWarning',
  data() {
    return {
      // 查询表单数据
      searchParams: {
        page: 1, // 当前页码
        pageSize: 10, // 每页显示的条数
        poleName: '', // 一体杆名称
        poleNumber: '', // 一体杆编号
        handleStatus: '' // 处置状态 -- 0:未派单,1:已派单,2:已接单,3:已完成
      },
      // 告警信息列表
      warningList: [],
      // 告警信息列表数据总条数
      warningTotal: 0,
      // 处置状态枚举
      handleStatusEnum: {
        0: '未派单',
        1: '已派单',
        2: '已接单',
        3: '已完成'
      }
    }
  },
  created() {
    // 获取告警信息列表
    this.getWarningList()
  },
  methods: {
    // 获取告警信息列表
    async getWarningList() {
      const res = await getWarningListAPI(this.searchParams)
      this.warningList = res.rows
      this.warningTotal = res.total
    },
    // 按条件搜索一体杆信息列表
    searchWarnningList() {
      // 重置页码
      this.searchParams.page = 1
      this.getWarningList()
    },
    // 删除告警信息
    onDeleteWarning(id) {
      this.$confirm('您确定要删除这条告警记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 删除数据
        await deleteWarningAPI(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 刷新列表
        this.getWarningList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.page-container {
  .search-form {
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    .el-form-item {
      margin-right: 20px;
    }
  }
  .operation-btn {
    margin-bottom: 20px;
  }
  ::v-deep .el-table {
    margin-bottom: 20px;
    .el-table__cell {
      padding: 5px 0;
    }
  }
}
</style>
